import React from "react";
import BaseComponent from "../../redare/components/BaseComponent";
import CommonPageHeader from "../../components/common/CommonPageHeader";
import {Button, Card, Col, Row} from "antd";
import DepartmentTree from "../../components/setting/department/DepartmentTree";
import DepartmentGrid from "../../components/setting/department/DepartmentGrid";
import {WebPage} from "../../redare_components/webplatform_workbench/utils/WorkbenchDecoratorUtil";
import ModalNoAnt from "../../components/common/ModalNoAnt";
import DepartmentForm from "../../components/setting/department/DepartmentForm";
import DictionaryPresenter from "../../.gen/presenter/DictionaryPresenter";

const routes = [
    {
        path: '/',
        breadcrumbName: '工作台'
    },
    {
        path: '/setting',
        breadcrumbName: '系统管理'
    }
];

export default @WebPage({
    id: 'com.redare.devframework.webplatform.pages.site.department.DingDepartmentPage',
    classify: '组织架构',
    name: '系统设置',
    webPath: '/setting/department',
    webFunIds: [
        'syncDingUserAndDepart',
        'DingDepartmentAdd',
        'DingDepartmentEdit',
        'DingDepartmentDel',
    ]
})

class DingDepartmentPage extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = {
            updateLoading: false,
            title: '-'
        };
        this.dingDepartmentPresenter = new DictionaryPresenter(this);
        this.registerEventListener("on_department_tree_select", (record) => {
            this.setState({title: record.title});
            this.departmentId = record.departmentId;
            if (this.departmentGrid) {
                this.departmentGrid._findDingDepartmentPage({departmentParentIdOfService: record.departmentId })
            }
        })
    }

    update() {
        this.setUpdateBtnLoading(true);
        this.dingDepartmentPresenter.syncDingUserAndDepart(
            {},
            (result) => {
                this.setUpdateBtnLoading(false);
                let {data} = result;
                let msgList = [];
                Object.entries(data).forEach(([key, value]) => {
                    msgList.push(value)
                });
                let content = msgList.map((item, index) => {
                    return <p key={'k-' + index}>{item}</p>
                });
                this.alertSuccess(content, {
                    title: '获取组织架构更新成功', onOk: () => {
                        if (this.departmentGrid) {
                            this.departmentGrid._findDingDepartmentPage()
                        }
                        if (this.departmentTree) {
                            this.departmentTree._loadDeptTreeData()
                        }
                    }
                });
            },
            () => {
                this.setUpdateBtnLoading(false)
            }
        )
    }

    _addDepartment(callback) {
        let form = this.departmentModal.getInstance();
        form.validateFormFields()
            .then(values =>{
                callback.openLoading();
                values.departmentParentId = this.departmentId;
                this.dingDepartmentPresenter.addDingDepartment(
                    values,
                    {},
                    () =>{
                        this.toastSuccess("添加成功");
                        this.departmentGrid._findDingDepartmentPage({departmentParentIdOfService: this.departmentId });
                        this.departmentTree._loadDeptTreeData();
                        callback.closeModal()
                    },
                    () => {
                        callback.closeLoading()
                    }
                );
            })
    }

    render() {
        return (
            <>
                <div>
                    <CommonPageHeader
                        className="margin-bottom bg-white"
                        title='组织架构'
                        routes={routes}
                    />
                    <Card
                      bordered={false}
                      className="fixed-top fixed-top-height margin24"
                      bodyStyle={{paddingBottom: 0, height: 'calc(100vh - 210px)', overflow: 'hidden'}}
                    >
                        <Row gutter={24}>
                            <Col span={6} style={{borderRight: 'solid 1px rgb(232, 232, 232)'}}>
                                <DepartmentTree ref={(the) => {
                                    this.departmentTree = the
                                }}/>
                            </Col>
                            <Col span={18}>
                                <div className="flex-space-between" style={{marginBottom: '10px'}}>
                                    <div>{this.state.title}</div>
                                    <div className="search-buttons">
                                        <Button
                                            className="button"
                                            type="primary"
                                            loading={this.state.updateLoading}
                                            onClick={this.update.bind(this)}>获取组织架构更新</Button>
                                        <Button
                                            className="button"
                                            onClick={this.enabledFormModal.bind(this)}>添加</Button>
                                    </div>
                                </div>
                                <DepartmentGrid style={{borderLeft: 'solid 1px red'}} ref={(the) => {
                                    this.departmentGrid = the
                                }}/>
                            </Col>
                        </Row>
                    </Card>
                </div>

                <ModalNoAnt
                    title="添加部门"
                    destroyOnClose={true}
                    ref={o => this.departmentModal = o}
                    okfn={(callback) => this._addDepartment(callback)}
                >
                    <DepartmentForm parentName={this.state.title}/>
                </ModalNoAnt>
            </>
        );
    }

    enabledFormModal() {
        if (!this.departmentId) {
            this.toastWarning("请先选中左侧的部门");
            return
        }
        this.departmentModal.show()
    }

    setUpdateBtnLoading(updateLoading) {
        this.setState({updateLoading})
    }

}